<template>
  <transition name="tag" v-if="isShow" @click="handleTagClick">
    <div :class="tagClass" :style="tagStyle" ref="tag">
      <div :class="dotClass" :style="dotStyle" v-if="isShowDot"></div>
      <div :class="conClass" :style="conStyle">
        <slot></slot>
      </div>
      <div :class="closeClass" :style="closeStyle" v-if="closable" @click="handleTagClose">
        <i class="vbestui-iconfont icon-close" :class="iconClass" :style="iconStyle"></i>
      </div>
    </div>
  </transition>
</template>
<script>
import { oneOf } from "utils/index.js";
const prefixCls = "vbestui-tag";
const initColorList = [
  "primary",
  "info",
  "success",
  "warning",
  "error",
  "joker",
];
export default {
  name: "BTag",
  props: {
    type: {
      validator(value) {
        return oneOf(value, ["border", "dot"]);
      },
      default: "border",
    },
    size: {
      validator(value) {
        return oneOf(value, ["default", "medium", "large"]);
      },
      default: "default",
    },
    closable: {
      type: Boolean,
      default: false,
    },
    closeBorder: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "",
    },
    plain: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      prefixCls: prefixCls,
      isShow: true,
    };
  },
  computed: {
    tagClass() {
      return [prefixCls];
    },
    tagStyle() {
      return {
        background: this.type != "dot" ? (this.plain ? "" : this.getColor) : "",
        borderColor: this.getColor,
      };
    },
    dotClass() {
      return [`${this.prefixCls + "-dot"}`];
    },
    dotStyle() {
      return {
        background: this.type == "dot" ? this.getColor : "",
        borderColor: this.type == "dot" ? this.getColor : "",
      };
    },
    conClass() {
      return [`${prefixCls + "-content"}`];
    },
    conStyle() {
      return {
        padding: `${this.getConSizeSty} 10px`,
        marginRight: this.closable ? "30px" : "",
        paddingRight: this.closable ? (this.closeBorder ? "10px" : "5px") : "",
        color: this.isWhite ? "#fff" : this.getColor,
      };
    },
    closeClass() {
      return [`${prefixCls + "-close"}`];
    },
    closeStyle() {
      return {
        borderLeft: this.closeBorder ? `1px solid var(--border)` : "",
        borderColor:
          this.type == "border"
            ? this.plain
              ? this.getColor
              : "#fff"
            : this.getColor,
      };
    },
    iconClass() {
      return [`${prefixCls + "-iconSize"}`];
    },
    iconStyle() {
      return {
        color: this.isWhite ? "#fff" : this.getColor,
      };
    },
    isShowDot() {
      return this.type == "dot";
    },
    getConSizeSty() {
      let str = "";
      switch (this.size) {
        case "default":
          str = "4";
          break;
        case "medium":
          str = "6px";
          break;
        case "large":
          str = "8px";
          break;
      }
      return str;
    },
    /**color为white的情况 */
    isWhite() {
      return this.color != "" && !this.plain && this.type != "dot";
    },
    /**get color */
    getColor() {
      let color = oneOf(this.color, initColorList)
        ? `var(--${this.color})`
        : `${this.color}`;
      return color;
    },
  },
  methods: {
    handleTagClose() {
      this.isShow = false;
      this.$emit("close");
    },
    handleTagClick() {
      this.$emit("click");
    },
  },
};
</script>